Site = Ext.extend(Ext.util.Observable, {
	constructor: function(config){
		Ext.apply(this, config);
		Site.superclass.constructor.call(this, config);
		
		this.init();	
	}
	
	,init: function(){
		this.getContainer();	
	}
	
	,getContainer: function(){
		if(this.__container) return this.__container;
		
		this.__container = new Ext.Element(Ext.DomHelper.createDom({
			tag: 'div'
			,id: 'site-container'
		}));
		
		var clearing = new Ext.Element(Ext.DomHelper.createDom({
			tag: 'div'
			,cls: 'site-clearing'	
		}));
		
		this.__container.appendChild([
			this.getHeader()
			,this.getMenu()
			,this.getColumn1()
			,this.getColumnContent()
			,this.getColumn2()
			,clearing
			,this.getFooter()
		]);
		
		return this.__container;	
	}
	
	,getHeader: function(){
		if(this.__header) return this.__header;
		
		this.__header = new Ext.Element(Ext.DomHelper.createDom({
			tag: 'div'
			,id: 'site-header'	
		}));
		
		return this.__header;		
	}
	
	,getMenu: function(){
		if(this.__menu) return this.__menu;
		
		this.__menu = new Ext.Element(Ext.DomHelper.createDom({
			tag: 'div'
			,id: 'site-menu'
			,children: [
				{
					tag: 'ul'
					,id: 'site-menu-menu'
					,children: [
						{
							tag: 'li',
								children: [
									{
										tag: 'a'
										,html: 'Home'	
									},{
										tag: 'ul'
										,children: [
											{tag: 'li', html: '<a href="#">About</a>'}
										]
									}
								]
							}
						,{tag: 'li', html: '<a href="#">About</a>'}
						,{tag: 'li', html: '<a href="#">Contact</a>'}
					]	
				}
			]	
		}));
		
		var o = this;
		var dt = new Ext.dd.DropTarget(this.__menu.first(), {
			ddGroup: 'menu'
			,notifyDrop: function(ds, e, data){
				switch(data.action){
					case 'add':
						o.addMenuItem(this.el, ds);
						break;
				}
				
				return true;
			}	
		});
		
		(function(){
			new Ext.ux.Menu('site-menu-menu', {
				transitionType: 'slide',
				direction: 'horizontal', // default
				delay: 0.2,              // default
				autoWidth: true,         // default
				transitionDuration: 0.3, // default
				animate: true,           // default
				currentClass: 'current'  // default
			});	
		}).defer(500);
		
		return this.__menu;	
	}
	
	,getColumn1: function(){
		if(this.__column1) return this.__column1;
		
		this.__column1 = new Ext.Element(Ext.DomHelper.createDom({
			tag: 'div'
			,id: 'site-column1'	
		}));
		
		var o = this;
		var dz = new Ext.dd.DropZone(this.__column1, {
			ddGroup: 'column'
			,notifyDrop: function(ds, e, data){
				switch(data.action){
					case 'add':
						o.addPanel(this.el, ds);
						break;
				}
				
				return true;
			}
		});
		
		return this.__column1;		
	}
	
	,getColumnContent: function(){
		if(this.__columnContent) return this.__columnContent;
		
		this.__columnContent = new Ext.Element(Ext.DomHelper.createDom({
			tag: 'div'
			,id: 'site-columncontent'	
		}));
		
		var o = this;
		var dz = new Ext.dd.DropZone(this.__columnContent, {
			ddGroup: 'column'
			,notifyDrop: function(ds, e, data){
				switch(data.action){
					case 'add':
						o.addPanel(this.el, ds);
						break;
						
					case 'add-gmap':
						o.addGmap(this.el, ds);
						break;
				}
				
				return true;
			}
		});
		
		return this.__columnContent;		
	}
	
	,getColumn2: function(){
		if(this.__column2) return this.__column2;
		
		this.__column2 = new Ext.Element(Ext.DomHelper.createDom({
			tag: 'div'
			,id: 'site-column2'
		}));
		
		var o = this;
		var dt = new Ext.dd.DropTarget(this.__column2, {
			ddGroup: 'column'
			,notifyDrop: function(ds, e, data){
				switch(data.action){
					case 'add':
						o.addPanel(this.el, ds);
						break;
				}
				
				return true;
			}
		});
		
		return this.__column2;
	}
	
	,getFooter: function(){
		if(this.__footer) return this.__footer;
		
		this.__footer = new Ext.Element(Ext.DomHelper.createDom({
			tag: 'div'
			,id: 'site-footer'	
		}));
		
		return this.__footer;		
	}
	
	,getTextFieldEditor: function(){
		if(this.__textFieldEditor) return this.__textFieldEditor;
		
		this.__textFieldEditor = new Ext.Editor({
			field: {
				xtype: 'textfield'
				,selectOnFocus: true	
			}
			,updateEl: true
			,autoSize: true
			,cancelOnEsc: true
			,completeOnEnter: true
			,listeners: {
				startedit: function(){
					
				}
				,complete: function(editor, value, startValue){
						
				}	
			}	
		});
		
		return this.__textFieldEditor;	
	}
	
	,getTextAreaEditor: function(){
		if(this.__textAreaEditor) return this.__textAreaEditor;
		
		this.__textAreaEditor = new Ext.Editor({
			field: {
				xtype: 'textarea'
				,grow: true
				,growMax: 200
			}
			,updateEl: true
			,autoSize: true
			,cancelOnEsc: true
			,listeners: {
				startedit: function(){
					
				}
				,complete: function(editor, value, startValue){
						
				}	
			}
		});
		
		return this.__textAreaEditor;
	}
	
	,addPanel: function(el, ds){
		if('panel' == ds.dragData.type){
			var panel = ds.el;
			el.appendChild(panel);
			return panel;
		}
		
		var panel = el.appendChild(Ext.DomHelper.createDom({
			tag: 'div'
			,cls: 'panel'	
		}));
		
		var title = panel.appendChild(Ext.DomHelper.createDom({
			tag: 'div'
			,cls: 'title'
			,html: 'Double click to edit title'	
		}));
		
		title.on('dblclick', function(e, html, o){
			this.getTextFieldEditor().startEdit(title);
		}, this);
		
		var content = panel.appendChild(Ext.DomHelper.createDom({
			tag: 'div'
			,cls: 'content'
			,html: 'Double click to edit content'	
		}));
		
		content.on('dblclick', function(e, html, o){
			this.getTextAreaEditor().startEdit(content);
		}, this);
		
		var ds = new Ext.dd.DragSource(panel, {
			ddGroup: 'column'
			,dragData: {action: 'add', type: 'panel'}
		});
		
		return panel;
	}
	
	,addMenuItem: function(el, ds){
		if('menu' == ds.dragData.type){
			return el.appendChild(ds.el);	
		}
		
		var item = el.appendChild(Ext.DomHelper.createDom({
			tag: 'li'	
		}));
		
		var a = item.appendChild(Ext.DomHelper.createDom({
			tag: 'a'
			,html: 'Menu item'	
		}));
		
		item.on('dblclick', function(e, html, o){
			this.getTextFieldEditor().startEdit(a);
		}, this);
		
		var ds = new Ext.dd.DragSource(item, {
			ddGroup: 'menu'
			,dragData: {action: 'add', type: 'menu'}
		});
		
		return item;
	}
	
	,addGmap: function(el, ds){
		if('gmap' == ds.dragData.type){
			var panel = ds.el;
			el.appendChild(panel);
			return panel;
		}
		
		var panel = el.appendChild(Ext.DomHelper.createDom({
			tag: 'div'
			,cls: 'panel'	
		}));
		
		var title = panel.appendChild(Ext.DomHelper.createDom({
			tag: 'div'
			,cls: 'title'
			,html: 'Map'	
		}));
		
		title.on('dblclick', function(e, html, o){
			this.getTextFieldEditor().startEdit(title);
		}, this);
		
		var content = panel.appendChild(Ext.DomHelper.createDom({
			tag: 'div'
			,cls: 'content'
		}));
		
		content.on('dblclick', function(e, html, o){
			editMap();
		}, this);
		
		var ds = new Ext.dd.DragSource(panel, {
			ddGroup: 'column'
			,dragData: {action: 'add', type: 'gmap'}
		});
		
		function editMap(){
			var preview = new Ext.BoxComponent();
			var form = new Ext.FormPanel({
				frame: true
				,items: [
				    {
						xtype: 'textfield'
						,name: 'q'
						,hideLabel: true
						,anchor: '0'
					},preview
				]
				,buttons: [
					{
						text: 'Search'
						,handler: function(){
							var q = form.getForm().findField('q').getValue();
							q = q.replace(/\s+/g, '+');
							q = q.replace(/\//g, '%2F');
							var html = '<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q='+ q + '&amp;sll=10.776401,106.701163&amp;sspn=0.019519,0.038581&amp;ie=UTF8&amp;hq=&amp;hnear='+ q + '&amp;z=14&amp;output=embed"></iframe>';
							preview.el.update(html);	
						}
					},{
						text: 'OK'
						,handler: function(){
							content.update(preview.el.dom.innerHTML);
							win.hide();
						}
					}
				]
			});
			var win = new Ext.Window({
				title: 'Gmap'
				,width: 500
				,height: 500
				,items: form
			});
			
			win.show();
		}
		
		editMap();
		
		return panel;
	}
});